<template>
	<view class="pages">
		<!-- <view class="collapse u-flex-around u-flex-y-center">
			<view class="collapse_item u-flex-y-center" v-for="(item,index) in collapselist" :key="index" @click="">
				<text>{{item.title}}</text>
				<view class="arrow-icon">
					<image src="/static/down.png"></image>
				</view>
			</view>
		</view> -->
		<view class="collapse u-flex-around u-flex-y-center">
			<template v-for="item in collapselist">
				<yy-choosecade :config="item" v-model="formData[item.fieldName]" @change_list="submit"></yy-choosecade>
			</template>
		</view>
		<view class="main">
			<view class="u-bg-white main_box" v-for="(item,index) in UserAuditList" :key="index" @click="skip(item)">
				<view class="u-flex-between u-flex-y-center main_box_top">
					<text>申请时间:{{item.createdAt}}</text>
					<text>{{item.status==0?'等待审核':'审核通过'}}</text>
				</view>
				<view class="u-flex-between u-flex-y-center main_box_bottom">
					<text>ID:{{item.userId}}@{{item.matchmakerUid}}</text>
					<text>{{item.memberName}}({{item.startTime}}/{{item.endTime}})</text>
				</view>
			</view>
			<u-empty v-if="UserAuditList.length==0" textSize='30' mode="data" width="200" height="200"
				icon="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E6%95%B0%E6%8D%AE%E4%B8%BA%E7%A9%BA.png">
			</u-empty>
		</view>
		<!-- <u-picker :show="showpicker" :defaultIndex="defaultIndex" @close="cancel"
			:closeOnClickOverlay="closeOnClickOverlay" :columns="columns" :itemHeight="48" :title="title"
			@cancel="cancel" keyName="name" @change="changeHandler" @confirm="authority_submit"></u-picker> -->
	</view>
</template>

<script>
	import {
		getUserAuditList,
		getMatchList,
		getMemberList
	} from '@/common/api.js'
	export default {
		data() {
			return {
				// showpicker:false,
				// defaultIndex:[],
				// columns:[],
				memberId: '',
				matchmakerUid: '',
				UserAuditList: [],
				MemberList: [],
				MatchList: [],
				currentPage: 1,
				noMore: 'more',
				collapselist: [{
					title: '@2',
					label: '红娘id',
					value: '',
					array: [],
					fieldName: 'matchmakerUid',
					defaultIndex: [0]
				}, {
					title: '糖果会员',
					label: '会员等级',
					array: [],
					value: '',
					defaultIndex: [0],
					fieldName: 'memberId',
				}],
				formData: {
					matchmakerUid: 0,
					memberId: 0,

				}
			}
		},
		async onLoad() {
			let list1 = this.collapselist[1]
			let list = this.collapselist[0]
			let arr = {
				'id': '全部',
				'name': '全部',
				days: ''
			}
			let get_MemberList = await this.get_MemberList()
			get_MemberList.unshift(arr)
			list1.array = get_MemberList
			list1.title = '全部'

			this.formData.memberId = get_MemberList[0].id == '全部' ? 0 : get_MemberList[0].id
			let get_MatchList = await this.get_MatchList()
			list.title = 'id:' + '全部'
			get_MatchList.unshift(arr)
			this.formData.matchmakerUid = get_MatchList[0].id == '全部' ? 0 : get_MatchList[0].id

			list.array = get_MatchList.map(item => {
				return {
					name: item.id,
					id: item.id
				}
			})
			this.$nextTick(() => {
				this.get_UserAuditList()
			})
		},
		watch: {
			formData: {
				handler(value) {

				},
				deep: true // 深度监听
			}
		},

		onShow() {

		},
		onReachBottom() {
			this.get_UserAuditList()
		},
		methods: {
			submit(val) {
				let {
					name,
					obj
				} = val
				this.collapselist = this.collapselist.map(item => {
					if (item.fieldName == obj.fieldName) {
						if (item.fieldName == 'matchmakerUid') {
							item.title = 'id:' + name

						} else if (item.fieldName == 'memberId') {
							item.title = name
						}

					}
					return item
				})
				this.init()
			},
			skip(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pagesC/perfect_data/perfect_audit/index?userId=' + item.userId + '&id=' + item
						.memberId + '&is_audit=审核'
				})
			},
			get_MemberList() {
				return new Promise(resolve => {
					getMemberList().then((result) => {
						resolve(result)
					}).catch((err) => {
						reject(err)
					})

				})
			},
			get_MatchList() {
				return new Promise(resolve => {
					getMatchList().then((result) => {
						resolve(result)
					}).catch((err) => {
						reject(err)
					})

				})
			},
			init() {
				this.currentPage = 1
				this.UserAuditList = []
				this.get_UserAuditList()
			},
			get_UserAuditList() {
				let data = {
					params: {
						page: this.currentPage,
						perPage: 10,
						memberId: this.formData.memberId,
						matchmakerUid: this.formData.matchmakerUid
					}
				}
				getUserAuditList(data).then((result) => {
					this.UserAuditList = [...this.UserAuditList, ...result.list]
					// result.list.length <= 0 ? this.status = 'noMore' : this.status = 'more'
					this.currentPage++;
				}).catch((err) => {
					console.log(err)
				})
			},

		}
	}
</script>

<style lang="scss">
	.pages {
		min-height: 100vh;

		.collapse {
			height: 88rpx;
			background-color: #fff;

		}

		.main {
			padding: 20rpx 24rpx;
			box-sizing: border-box;

			.main_box {
				border-radius: 20rpx;
				overflow: hidden;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.main_box_top {

					height: 73rpx;
					padding: 0 29rpx 0 24rpx;
					box-sizing: border-box;
					position: relative;

					&::after {
						content: '';
						width: 100%;
						height: 2rpx;
						-webkit-transform: scaleY(.5);
						transform: scaleY(.5);
						background: #EEEEEE;
						position: absolute;
						bottom: 0;
						left: 0;
					}

					text {
						font-size: 26rpx;
						font-weight: 400;

						&:first-child {

							color: #929292;
						}

						&:last-child {
							color: #FF7612;
						}
					}
				}

				.main_box_bottom {
					height: 76rpx;
					padding: 0 33rpx 0 24rpx;
					box-sizing: border-box;

					text {
						font-size: 26rpx;

						color: #000000;

						&:first-child {
							font-weight: bold;
						}

						&:last-child {
							font-weight: 400;
						}
					}
				}
			}
		}
	}
</style>
